<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清空数据</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            padding: 20px; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container { 
            background: white; 
            padding: 40px; 
            border-radius: 15px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            text-align: center;
            max-width: 500px;
        }
        .btn { 
            padding: 15px 30px; 
            margin: 10px; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer; 
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-danger { 
            background: #dc3545; 
            color: white; 
        }
        .btn-danger:hover { 
            background: #c82333; 
            transform: translateY(-2px);
        }
        .btn-success { 
            background: #28a745; 
            color: white; 
        }
        .btn-success:hover { 
            background: #218838; 
            transform: translateY(-2px);
        }
        .btn-info { 
            background: #17a2b8; 
            color: white; 
        }
        .btn-info:hover { 
            background: #138496; 
            transform: translateY(-2px);
        }
        .result { 
            margin-top: 20px; 
            padding: 15px; 
            border-radius: 8px; 
            font-weight: bold;
        }
        .success { 
            background: #d4edda; 
            color: #155724; 
            border: 1px solid #c3e6cb;
        }
        .error { 
            background: #f8d7da; 
            color: #721c24; 
            border: 1px solid #f5c6cb;
        }
        .info { 
            background: #d1ecf1; 
            color: #0c5460; 
            border: 1px solid #bee5eb;
        }
        h1 { color: #333; margin-bottom: 20px; }
        p { color: #666; margin-bottom: 30px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧹 数据管理</h1>
        <p>清空所有用户数据，重新开始测试</p>
        
        <button class="btn btn-danger" onclick="clearAllData()">
            🗑️ 清空所有数据
        </button>
        
        <button class="btn btn-success" onclick="createTestData()">
            ➕ 创建测试数据
        </button>
        
        <button class="btn btn-info" onclick="checkStatus()">
            📊 查看当前状态
        </button>
        
        <div id="result"></div>
        
        <div style="margin-top: 30px;">
            <a href="start.html" style="color: #007bff; text-decoration: none; font-weight: bold;">
                🏠 返回开始页面
            </a>
        </div>
    </div>

    <script>
        function clearAllData() {
            try {
                localStorage.removeItem('users');
                localStorage.removeItem('currentUser');
                document.getElementById('result').innerHTML = 
                    '<div class="success">✅ 所有数据已清空！现在可以重新注册和登录了。</div>';
            } catch (error) {
                document.getElementById('result').innerHTML = 
                    '<div class="error">❌ 清空失败: ' + error.message + '</div>';
            }
        }
        
        function createTestData() {
            try {
                const testUsers = [
                    { id: 1, username: 'admin', password: '123456', phone: '13800138000', email: 'admin@test.com', type: 'user', name: '管理员' },
                    { id: 2, username: 'merchant1', password: '123456', phone: '13800138001', email: 'merchant@test.com', type: 'merchant', name: '测试商家' },
                    { id: 3, username: 'rider1', password: '123456', phone: '13800138002', email: 'rider@test.com', type: 'rider', name: '测试骑手' }
                ];
                
                localStorage.setItem('users', JSON.stringify(testUsers));
                document.getElementById('result').innerHTML = 
                    '<div class="success">✅ 测试数据已创建！<br>用户: admin/123456<br>商家: merchant1/123456<br>骑手: rider1/123456</div>';
            } catch (error) {
                document.getElementById('result').innerHTML = 
                    '<div class="error">❌ 创建失败: ' + error.message + '</div>';
            }
        }
        
        function checkStatus() {
            try {
                const users = JSON.parse(localStorage.getItem('users') || '[]');
                const currentUser = localStorage.getItem('currentUser');
                
                let html = '<div class="info">';
                html += '📊 当前状态:<br><br>';
                html += `👥 用户数量: ${users.length}<br>`;
                html += `🔐 当前登录: ${currentUser ? '是' : '否'}<br>`;
                
                if (currentUser) {
                    const user = JSON.parse(currentUser);
                    html += `👤 登录用户: ${user.name} (${user.type})<br>`;
                }
                
                if (users.length > 0) {
                    html += '<br>📋 用户列表:<br>';
                    users.forEach((user, index) => {
                        html += `${index + 1}. ${user.username} (${user.type})<br>`;
                    });
                }
                
                html += '</div>';
                document.getElementById('result').innerHTML = html;
            } catch (error) {
                document.getElementById('result').innerHTML = 
                    '<div class="error">❌ 检查失败: ' + error.message + '</div>';
            }
        }
        
        // 页面加载时自动检查状态
        window.onload = function() {
            checkStatus();
        };
    </script>
</body>
</html>
